import { useState, useEffect } from "react"
import {Todo} from "../types/todos"


export function useTodosData() {
  const [todos, setTodos] = useState<Todo[]>([
    { id: 1, text: "Learn React", done: true }
  ]);

  useEffect(() => {
    setTodos([
      { id: 1, text: "Learn React", done: true },
      { id: 2, text: "Learn TypeScript", done: false },
      { id: 3, text: "Learn Vue", done: false },
      { id: 4, text: "Learn Java", done: false },
    ])
  }, [])

  const addTodo = (text: string) => { 
    const newTodo: Todo = {
      id: todos.length + 1,
      text,
      done: false
    }
    setTodos([...todos, newTodo])
  }

  const deleteTodo = (id: number) => { 
    setTodos(todos.filter(todo => todo.id !== id))
  }

  const toggleTodo = (id: number) => { 
    setTodos(todos.map(todo => { 
      if (todo.id === id) { 
        todo.done = !todo.done
      }
      return todo;
    }))
  }
  
  return {
    todos,
    setTodos,
    addTodo,
    deleteTodo,
    toggleTodo,
  }
}